<html>
<head>
    <meta charset="utf-8" />
    <meta
            name="viewport"
            content="initial-scale=1,maximum-scale=1,user-scalable=no"
    />
    <!--
  ArcGIS API for JavaScript, https://js.arcgis.com
  For more information about the view-padding sample, read the original sample description at developers.arcgis.com.
  https://developers.arcgis.com/javascript/latest/sample-code/view-padding/index.html
  -->
    <title>View padding | Sample | ArcGIS API for JavaScript 4.16</title>
    <style>
        html,
        body,
        #viewDiv {
            padding: 0;
            margin: 0;
            height: 100%;
            width: 100%;
        }

        #sidebar {
            z-index: 99;
            position: absolute;
            top: 0;
            right: 0;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            width: 320px;
        }

        #text {
            color: white;
            padding: 3%;
        }
    </style>

    <link rel="stylesheet" href="/js/arcgisjsapi/4.16/esri/css/main.css">
    <link rel="stylesheet" href="/js/arcgisjsapi/4.16/esri/css/view.css">
    <link
            rel="stylesheet"
            href="/js/arcgisjsapi/4.16/esri/themes/light/main.css"
    />

    <script type="text/javascript">
        dojoConfig = {
            baseUrl:"localhost:8088/js/arcgisjsapi/4.16/dojo",
            async:true,
            parseOnLoad: true,
            packages: [{
                name: 'arcgis',
                location: "/js/arcgisjsapi/4.16"
            }]
        };
    </script>

    <script src="/js/arcgisjsapi/4.16/init.js"></script>

            <script src="/js/arcgisjsapi/4.16/"></script>

            <script src="/js/arcgisjsapi/4.16/dojo/dojo.js"
                    data-dojo-config="async:true"></script>


    <script>
        try {
            require(["arcgis/esri/Map", "arcgis/esri/views/MapView",
                    "arcgis/esri/widgets/BasemapToggle",],
                function (Map, MapView,  BasemapGallery) {

                alert("ss");
                // Create the Map
                var map = new Map({
                    logo:false,
                   // basemap: "topo"
                    basemap:"streets",
                });
                    map.onClick = function (event) {
                        alert("click");
                        map.basemap = "gray";
                        // map.reset();
                    };
                    map.on("click", function (event) {
                        alert("click");
                        map.basemap = "gray";
                        // map.reset();
                    });

                    // Create the view set the view padding to be 320 px from the right
                var view = new MapView({
                    container: "viewDiv",
                    map: map,
                    center: [-74.045459, 40.690083], // Liberty Island, NY, USA
                    zoom: 16,
                    padding: {
                        right: 320 // Same value as the #sidebar width in CSS
                    },
                    //固定popup，取消浮动
                                    popup:{
                                              dockEnabled:true,  //将popup固定住
                                                   dockOptions:{
                                                     buttonEnabld:false,  //将切换固定状态的那个按钮隐藏掉
                                                        breakpoint:false  //不明白什么作用，但是如果是true或去掉不写，popup将不固定
                                                    }
                                           }
                });

                    var basemapToggle = new BasemapToggle({
                        view: view,
                        nextBasemap: "satellite"
                    });

                   // view.ui.add(basemapToggle, "bottom-left");





            });
        }
        catch (e) {
            alert(e);
        }


    </script>
</head>

<body>
<div id="viewDiv">
    <div id="sidebar" class="esri-widget">
        <div id="text">
            <h1>Liberty Island</h1>
            <p>
                Note that setting the view.padding makes the view.center,
                view.extent etc work off a subsection of the full view.
            </p>
            <p>Try to resize the window to get a better understanding.</p>
        </div>
    </div>
</div>
</body>
</html>